import * as THREE from 'three'
import * as  maptalks from "maptalks";
import "maptalks/dist/maptalks.css";
import { ThreeLayer } from 'maptalks.three/dist/maptalks.three.js'
import { ClusterLayer } from 'maptalks.markercluster'

// var gys = require('../../assets/img/HomePage/sfxm.png') //异常icon
var gys = require('../../assets/img/HomePage/sfxm2.png') //异常icon
var zc = require('../../assets/img/HomePage/sfxm2.png') //正常icon
var sfxmcluster = require('../../assets/img/HomePage/sfxmcluster.png') //正常icon聚合
// var errcluster = require('../../assets/img/HomePage/err.png') //异常icon聚合
var errcluster = require('../../assets/img/HomePage/sfxmcluster.png') //异常icon聚合

/**
*
* @authors wmn (wmn1525@gmail.com)
* @date    2020/8/18 下午16:43
* @id domId
* @id domId
*/
class mapInit {
  // 所有地市
  private geoJson = require('../../assets/mapjson/370000_full.json')  // 地市地图
  private dscenter = [118.2, 36];                                     // 地市中心点 (左+右-，上-下+)
  private dszoom = 7.3;                                               // 地市缩放比例
  private dspitch = 45;                                               // 地图倾斜角

  // 测试用
  // taian
  // private geoJson = require('../../assets/mapjson/taian.json');

  // rizhao
  // private geoJson = require('../../assets/mapjson/rizhao.json');
  // private dscenter = [119.08242, 35.45545];
  // private dszoom = 9.45;               
  // private dspitch = 30;  

  // jinan
  // private geoJson = require('../../assets/mapjson/jinan.json');
  // private dscenter = [117.05199, 36.59358];
  // private dszoom = 8.8;               
  // private dspitch = 30; 

  // weifang
  // private geoJson = require('../../assets/mapjson/weifang.json');
  // private dscenter = [119.06607, 36.35458];
  // private dszoom = 8.7;               
  // private dspitch = 30;                

  // zibo
  // private geoJson = require('../../assets/mapjson/zibo.json');
  // private dscenter = [118.06172, 36.46473];
  // private dszoom = 8.9;               
  // private dspitch = 30; 

  // qingdao
  // private geoJson = require('../../assets/mapjson/qingdao.json');
  // private dscenter =  [120.09629, 36.20744];
  // private dszoom = 8.7;               
  // private dspitch = 30; 

  // zaozhaung
  // private geoJson = require('../../assets/mapjson/zaozhaung.json');
  // private dscenter =  [117.3613, 34.79963];
  // private dszoom = 9.6;               
  // private dspitch = 30; 

  // dongying
  // private geoJson = require('../../assets/mapjson/dongying.json');
  // private dscenter =  [118.58215, 37.41878];
  // private dszoom = 9;               
  // private dspitch = 30; 

  // yantai
  // private geoJson = require('../../assets/mapjson/yantai.json');
  // private dscenter = [120.66757, 37.29794];
  // private dszoom = 8.5;               
  // private dspitch = 30; 

  // jining
  // private geoJson = require('../../assets/mapjson/jining.json');
  // private dscenter = [116.69649, 35.0382];
  // private dszoom = 8.8;               
  // private dspitch = 30; 

  // weihai
  // private geoJson = require('../../assets/mapjson/weihai.json');
  // private dscenter = [121.92348, 37.04212];
  // private dszoom = 9.5;               
  // private dspitch = 30; 

  // laiwu
  // private geoJson = require('../../assets/mapjson/laiwu.json');
  // private dscenter = [117.65992, 36.23317];
  // private dszoom = 10.3;               
  // private dspitch = 30; 

  // linqi
  // private geoJson = require('../../assets/mapjson/linqi.json');
  // private dscenter = [118.20184, 35.08729];
  // private dszoom = 8.6;               
  // private dspitch = 30; 

  // dezhou
  // private geoJson = require('../../assets/mapjson/dezhou.json');
  // private dscenter = [116.59941, 37.05079];
  // private dszoom = 8.7;               
  // private dspitch = 30; 

  // liaocheng
  // private geoJson = require('../../assets/mapjson/liaocheng.json');
  // private dscenter = [115.78847, 36.26452];
  // private dszoom = 9;               
  // private dspitch = 30; 

  // binzhou
  // private geoJson = require('../../assets/mapjson/binzhou.json');
  // private dscenter = [117.82279, 37.32726];
  // private dszoom = 8.7;               
  // private dspitch = 30; 

  // heze
  // private geoJson = require('../../assets/mapjson/heze.json');
  // private dscenter = [115.67298, 35.07095];
  // private dszoom = 8.95;               
  // private dspitch = 30; 

  get newgeoJson() {
    let userinfo = window.localStorage.getItem("userinf");
    // console.log("7777777777777:",userinfo)
    if (userinfo) {
      let orgValue = JSON.parse(userinfo).orgValue;
      if (orgValue == '8a1ea5c64bdebad1014bdebc55c80003') {
        // 济南
        this.geoJson = require('../../assets/mapjson/jinan.json');
        this.dscenter = [117.05199, 36.59358];
        this.dszoom = 8.8;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc5c2106cc') {
        // 日照
        this.geoJson = require('../../assets/mapjson/rizhao.json');
        this.dscenter = [119.08242, 35.45545];
        this.dszoom = 9.45;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc5c21078c') {
        // 泰安
        // this.geoJson = require('../../assets/mapjson/taian.json');
        // this.dscenter = [117.03526, 35.99198];
        // this.dszoom = 9.4;
        // this.dspitch = 20;
        this.geoJson = require('../../assets/mapjson/neimenggu1.json');
        this.dscenter = [110.270801, 43.818311];
        this.dszoom = 5.5;
        this.dspitch = 50;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc55c80162') {
        // 潍坊
        this.geoJson = require('../../assets/mapjson/weifang.json');
        this.dscenter = [119.06607, 36.35458];
        this.dszoom = 8.7;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc55c80270') {
        // 淄博
        this.geoJson = require('../../assets/mapjson/zibo.json');
        this.dscenter = [118.06172, 36.46473];
        this.dszoom = 8.9;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc55c80079') {
        // 青岛
        this.geoJson = require('../../assets/mapjson/qingdao.json');
        this.dscenter = [120.09629, 36.20744],
          this.dszoom = 8.7;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc5c21053d') {
        // 枣庄
        this.geoJson = require('../../assets/mapjson/zaozhaung.json');
        this.dscenter = [117.3613, 34.79963],
          this.dszoom = 9.6;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc5c21073c') {
        // 东营
        this.geoJson = require('../../assets/mapjson/dongying.json');
        this.dscenter = [118.58215, 37.41878],
          this.dszoom = 9;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc55c803a2') {
        // 烟台
        this.geoJson = require('../../assets/mapjson/yantai.json');
        this.dscenter = [120.66757, 37.29794],
          this.dszoom = 8.5;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc5c210469') {
        // 济宁
        this.geoJson = require('../../assets/mapjson/jining.json');
        this.dscenter = [116.69649, 35.0382],
          this.dszoom = 8.8;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc55c80318') {
        // 威海
        this.geoJson = require('../../assets/mapjson/weihai.json');
        this.dscenter = [121.92348, 37.04212],
          this.dszoom = 9.5;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc5c2104ea') {
        // 莱芜
        this.geoJson = require('../../assets/mapjson/laiwu.json');
        this.dscenter = [117.65992, 36.23317],
          this.dszoom = 10.3;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc5c210656') {
        // 临沂
        this.geoJson = require('../../assets/mapjson/linqi.json');
        this.dscenter = [118.20184, 35.08729],
          this.dszoom = 8.6;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc604707ec') {
        // 德州
        this.geoJson = require('../../assets/mapjson/dezhou.json');
        this.dscenter = [116.59941, 37.05079],
          this.dszoom = 8.7;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc5c2105ef') {
        // 聊城
        this.geoJson = require('../../assets/mapjson/liaocheng.json');
        this.dscenter = [115.78847, 36.26452],
          this.dszoom = 9;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc6047083c') {
        // 滨州
        this.geoJson = require('../../assets/mapjson/binzhou.json');
        this.dscenter = [117.82279, 37.32726],
          this.dszoom = 8.7;
        this.dspitch = 30;
      } else if (orgValue == '8a1ea5c64bdebad1014bdebc5c21040c') {
        // 菏泽
        this.geoJson = require('../../assets/mapjson/heze.json');
        this.dscenter = [115.67298, 35.07095],
          this.dszoom = 8.95;
        this.dspitch = 30;
      }
    }
    let arr = [this.geoJson, this.dscenter, this.dszoom, this.dspitch]
    return arr;
  }
  public map: any
  public mapHeight: number
  public isClickMarkerMenu: boolean //marker是否可以右击
  public sucessCluster: any // 点聚合图层
  public errcluster: any // 点聚合图层
  // 添加右击点击事件
  public clickEvent(val: any, path?: string): void {
  }
  constructor(id: string, option: { [key: string]: any } = {}) {
    this.mapHeight = option.mapHeight || 20000
    this.isClickMarkerMenu = option.isClickMarkerMenu || false
    this.map = new (maptalks as any).Map(id, {
      maxPitch: 80,
      // pitch: 20,
      // center: [119.08242, 35.42545],
      // zoom: 9.3,
      center: this.newgeoJson[1],
      zoom: this.newgeoJson[2],
      pitch: this.newgeoJson[3],
      minZoom: 4,
      attribution: null, //去广告
      baseLayer: null //去底图
    });
    this.addGeoMap(this.newgeoJson[0], "三维轮廓");
    this.addGeoLine(this.newgeoJson[0], "轮廓线");
    this.addClusterLayer()
    this.clickEvent = () => {
    }


    new (maptalks as any).VectorLayer('icon').addTo(this.map);
  }
  // 创建3D轮廓
  public addGeoMap(geoJson: any, threeLayer: any): void {
    let GeoLayer = this.map.getLayer(threeLayer)

    if (!GeoLayer) {
      GeoLayer = new ThreeLayer(threeLayer)
      this.map.addLayer(GeoLayer)
    }
    let features: any = []

    geoJson.features.forEach((b: any) => {
      features.push(b)
    })
    GeoLayer.prepareToDraw = (gl: any, scene: any, camera: any) => {
      var AmbientLight = new (THREE as any).AmbientLight(0xffffff) // soft white light
      scene.add(AmbientLight)
      let light = new (THREE as any).DirectionalLight(0xffffff)
      light.position.set(0, -20, 100).normalize()
      scene.add(light)
      features.forEach((g: any) => {
        if (g.properties.name == '呼伦贝尔市' || g.properties.name == '兴安盟' || g.properties.name == '赤峰市' || g.properties.name == '锡林郭勒盟' || g.properties.name == '通辽市') {
          let m = new (THREE as any).MeshStandardMaterial({
            color: '#333333',
            side: (THREE as any).DoubleSide,
            opacity: 0.9
          })

          let geometry = (maptalks as any).GeoJSON.toGeometry(g)
          let m2 = new (THREE as any).MeshStandardMaterial({
            color: '#333333',
            side: (THREE as any).DoubleSide,
            opacity: 0.9
          })

          let mesh = GeoLayer.toExtrudeMesh(
            geometry,
            // this.mapHeight,
            0,
            [m, m2],
            this.mapHeight
          )
          if (Array.isArray(mesh)) {
            mesh.forEach(v => {
              v.name = g.properties.name
              scene.add(v)
            })
          } else {
            mesh.name = g.properties.name
            scene.add(mesh)
          }
        } else {
          let m = new (THREE as any).MeshStandardMaterial({
            color: '#042481',
            side: (THREE as any).DoubleSide,
            opacity: .5
          })

          let geometry = (maptalks as any).GeoJSON.toGeometry(g)
          let m2 = new (THREE as any).MeshStandardMaterial({
            color: '#042481',
            side: (THREE as any).DoubleSide,
            opacity: .5
          })

          let mesh = GeoLayer.toExtrudeMesh(
            geometry,
            // this.mapHeight,
            0,
            [m, m2],
            this.mapHeight
          )
          if (Array.isArray(mesh)) {
            mesh.forEach(v => {
              v.name = g.properties.name
              scene.add(v)
            })
          } else {
            mesh.name = g.properties.name
            scene.add(mesh)
          }
        }

      })
    }
  }
  // 添加地图文字
  public addLabel(center: string, name: string, lineLayer: any): void {
    let text = new (maptalks as any).Marker(center, {
      properties: {
        name: name,
        altitude: 5000 + 1 // altitude for all vertexes
      },
      symbol: {
        textFaceName: 'sans-serif',
        textName: '{name}', // value from name in geometry's properties
        textWeight: 'normal', // 'bold', 'bolder'
        textStyle: 'normal', // 'italic', 'oblique'
        textSize: 14,
        textFont: null, // same as CanvasRenderingContext2D.font, override textName, textWeight and textStyle
        textFill: '#fff',
        textOpacity: 1,
        textHaloFill: '#666',
        textHaloRadius: 1,
        textWrapWidth: null,
        textWrapCharacter: '\n',
        textLineSpacing: 0,
        textDx: 0,
        textDy: 0,
        textHorizontalAlignment: 'middle', // left | middle | right | auto
        textVerticalAlignment: 'middle', // top | middle | bottom | auto
        textAlign: 'center' // left | right | center | auto
      }
    })
    text.addTo(lineLayer)
  }
  // 添加地图轮廓线
  public addGeoLine(geoJson: any, layer: any,): void {
    let lineLayer = this.map.getLayer(layer)
    if (!lineLayer) {
      lineLayer = new (maptalks as any).VectorLayer(layer)
      // lineLayer = new (maptalks as any).VectorLayer(layer, { enableAltitude: true })
      this.map.addLayer(lineLayer)
    }
    geoJson.features.forEach((v: any) => {
      let symbol = {
        lineColor: 'skyblue',
        lineWidth: 1,
        polygonOpacity: 0
      }
      v.properties.altitude = this.mapHeight
      let geoLine = (maptalks as any).GeoJSON.toGeometry(v)
      geoLine.setSymbol(symbol)
      geoLine.addTo(lineLayer)
      let name = v.properties.name
      let center = v.properties.center
      // console.log(v.properties);
      this.addLabel(center, name, lineLayer)
    })
  }
  //创建点聚合图层
  createClusterLayer(string, icon) {
    var clusterLayer = new ClusterLayer(string, [], {
      'noClusterWithOneMarker': false,
      'maxClusterZoom': 10,
      maxClusterRadius: 80,
      'symbol': {
        markerFile: icon,
        markerWidth: 30,
        markerHeight: 42,
        markerDx: 0,
        markerDy: 30,
      },
      'textSymbol': {
        textFill: '#fff',
        'textSize': 14
      },
      'drawClusterText': true,
      'geometryEvents': true,
      'single': true
    });
    return clusterLayer

  }
  // 添加点聚合图层
  addClusterLayer() {
    this.sucessCluster = this.createClusterLayer('sucessCluster', sfxmcluster)
    this.map.addLayer(this.sucessCluster);
    this.errcluster = this.createClusterLayer('errCluster', errcluster)
    this.map.addLayer(this.errcluster);
  }
  // 创建覆盖物
  createMarker(item, icon) {
    var _this = this
    let latlon = [item.X, item.Y * 1.2]
    console.log('latlon', latlon);

    let gysMarker = new (maptalks as any).Marker(latlon, {
      symbol: {
        markerFile: icon,
        markerWidth: 20,
        markerHeight: 20,
        markerDy: -5,
        textName: item.BDZMC,
        textFill: '#fff'
      }
    })
      .on('mouseenter', () => {
        gysMarker.openInfoWindow()
      })
      .on('click', () => {
        _this.clickEvent(gysMarker)
      })
    if (this.isClickMarkerMenu) {
      let option = {
        items: [
          {
            item: '运行监视', click: function () {
              _this.clickEvent(gysMarker, '运行监视')
            }
          },
          {
            item: '一次接线图', click: function () {
              _this.clickEvent(gysMarker, '一次接线图')
            }
          },
        ]
      }
      gysMarker.setMenu(option).openMenu()
    }
    gysMarker.setInfoWindow({
      single: true,
      autoCloseOn: 'click',
      custom: true,
      dy: -4,
      content:
        '<div class="gys-container"' +
        '<span>' +
        item.BDZMC +
        '</span>' +
        '</div>'
    })
    gysMarker.myData = item
    return gysMarker
  }
  // 添加初始数据展示
  public addnormal(data: any): void {
    console.log('辅助设备data:', data);
    var icon: any = zc
    let successMarkerArr = []
    // let errMarkerArr = []
    data.map((v: any, i) => {
      // console.log('v.state:',v,v.BDZID);
      // v.state = '0'
      let gysMarker = this.createMarker(v, icon)
      // if(v.state == '0'){
      successMarkerArr.push(gysMarker)
      // }else if(v.state == '1'){
      //   errMarkerArr.push(gysMarker)
      // }
    })
    this.sucessCluster.addMarker(successMarkerArr)
    // this.errcluster.addMarker(errMarkerArr)
  }
  // 获取正常运行状态的数据列表
  getSuccessMarkerArr() {
    let successMarkerArr = this.sucessCluster._geoList
    console.log('successMarkerArr:', successMarkerArr);
    return successMarkerArr
  }
  // 获取故障状态的数据列表
  getErrMarkerArr() {
    let errMarkerArr = this.errcluster._geoList
    return errMarkerArr
  }
  // 修改点击事件
  addClickEvent(fn: any) {
    // console.log(fn)
    this.clickEvent = fn
  }
  // 列表根据变电站id转哈希
  listToHx(arr) {
    // console.log("2333333333333333333333:",arr);

    let obj = {}
    arr.forEach(v => {
      // console.log('vvvvvvvvvvvvvvvvvvvvvv:',v);

      obj[v.myData.BDZID] = v
    })
    return obj
  }
  // 获取变电站正常运行状态的变电站哈希
  getSuccessMarkerObj() {
    let successMarkerArr = this.getSuccessMarkerArr()
    // console.log('successMarkerArr1111',successMarkerArr);
    let successMarkerObj = this.listToHx(successMarkerArr)
    // console.log('successMarkerObj',successMarkerObj);

    return successMarkerObj
  }
  // 获取变电站故障状态的变电站哈希
  getErrMarkerObj() {
    let errMarkerArr = this.getErrMarkerArr()
    let errMarkerObj = this.listToHx(errMarkerArr)
    return errMarkerObj
  }
  // 更新变电站状态为正常运行
  updateMarkerSuccessState(marker) {
    marker.remove()
    let symbol = marker.getSymbol()
    symbol.markerFile = zc
    marker.setSymbol(symbol)
    // marker.setSymbol({
    //   markerFile: zc,
    //   markerWidth: 20,
    //   markerHeight: 20,
    //   markerDy: -5
    // })
    marker.myData.state = '0'
    this.sucessCluster.addMarker(marker)


  }
  // 更新变电站状态为异常运行
  updateMarkerErrState(marker) {
    marker.remove()
    let symbol = marker.getSymbol()
    symbol.markerFile = gys
    marker.setSymbol(symbol)
    // marker.setSymbol({
    //   markerFile: gys,
    //   markerWidth: 20,
    //   markerHeight: 20,
    //   markerDy: -5
    // })
    marker.myData.state = '1'
    this.errcluster.addMarker(marker)


  }
}


export default mapInit